<script setup>
import { NCard, NButton, NSpace } from "naive-ui";
import { computed } from "vue";
import { WindowMinimise, Quit, WindowSetBackgroundColour } from "../../../wailsjs/runtime/runtime";
import { SetIsDarkMode, GetIsDarkMode } from "../../../wailsjs/go/preference/Preference";
import { usePreferenceStore } from "../../../stores/preference";

const pref = usePreferenceStore()

async function updatepref() {
    pref.isDarkTheme = !pref.isDarkTheme

    if (pref.isDarkTheme) {
        WindowSetBackgroundColour(24, 24, 28, 255)
    } else {
        WindowSetBackgroundColour(255, 255, 255, 255)
    }

    await SetIsDarkMode(pref.isDarkTheme)
}

const showThemeWord = computed(() => {
    return pref.isDarkTheme ? "🌙" : "☀"
})
</script>

<template>
    <NCard hoverable size="huge" :bordered="false" embedded>
        <template #header>
            <NSpace justify="center">
                <NButton size="large" round type="error" tertiary @click="Quit">
                    ✕
                </NButton>
                <NButton size="large" round type="success" tertiary @click="WindowMinimise">
                    −
                </NButton>
                <NButton size="large" round type="success" tertiary @click="updatepref">
                    {{ showThemeWord }}
                </NButton>
            </NSpace>
        </template>
    </NCard>
</template>

<style scoped></style>